<template>
    <div class="navHeaderM">
        <div class="sysName">
            课程辅助系统-管理后台
        </div>
        <div class="username">
            <div class="notice"></div>
            <div class="touxiang">
                <a-avatar :size="38">{{nameShow}}</a-avatar>
            </div>
            <div class="text">
                  <a-dropdown :trigger="['click']" placement='bottomCenter'>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                    {{usernameShow}} <a-icon type="down" />
                    </a>
                    <a-menu slot="overlay">
                    <a-menu-item key="1">
                        <a href="javascript:;" @click="$router.push('/study')">切换学生端</a>
                    </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'navHeader',
    props:{

    },
    data() {
        return {

        }
    },
    methods: {

    },
    computed:{
        usernameShow(){
           return this.$store.state.username
        },
        nameShow(){
            let a = this.$store.state.name
            let b = a.substr(a.length-1,1)
           return b
        },
    }
}
</script>

<style lang="scss" >

.navHeaderM{
    position: relative;
    display: flex;
    width: 100%;
    height: 65px;
    // background-color: #001529;
    .sysName{
        display: flex;
        width: 256px;
        height: 65px;
        color: #fff;
        font-size: 20px;
        line-height: 65px;
        padding-left: 20px;
        background-color: #001529;

    }
    .username{
        display: flex;
        width: 150px;
        height: 65px;
        color: #fff;
        position: absolute;
        top: 0;
        right: 38px;
        align-items: center;
        .notice{
            width: 20px;
            height: 20px;
            @include bgImg(20px,20px,'/imgs/notice.png');
            margin-right: 15px;
        }
        .touxiang{
            margin-right: 15px;
        }
        .text ::v-deep .ant-dropdown{
            top:65px !important;
            background-color: red !important;
        }
        .xiala{
            background-color: red;
        }
        
    }

}
</style>